<template>
  <div class="help-page">
    <div class="header">
      <div class="logo-section" @click="$router.push('/workspace')">
        <img src="../assets/img/logo.png" alt="金圣达" class="logo">
        <span class="brand-name">金圣达AI设计平台</span>
      </div>
      <div class="back-btn" @click="$router.push('/workspace')">
        <i class="el-icon-arrow-left"></i>
        返回工作台
      </div>
    </div>
    
    <div class="content-wrapper">
      <div class="sidebar">
        <div class="search-box">
          <el-input
            placeholder="搜索帮助文档"
            prefix-icon="el-icon-search"
            v-model="searchKeyword"
          ></el-input>
        </div>
        
        <div class="category-list">
          <div 
            v-for="(category, index) in categories" 
            :key="index"
            class="category-item"
            :class="{ active: activeCategory === category.id }"
            @click="activeCategory = category.id"
          >
            <i :class="category.icon"></i>
            <span>{{ category.name }}</span>
          </div>
        </div>
      </div>
      
      <div class="main-content">
        <div class="help-header">
          <h1>{{ currentCategory.name }}</h1>
          <p>{{ currentCategory.description }}</p>
        </div>
        
        <div class="article-list">
          <div 
            v-for="(article, index) in filteredArticles" 
            :key="index"
            class="article-item"
            @click="showArticle(article)"
          >
            <div class="article-title">{{ article.title }}</div>
            <div class="article-desc">{{ article.description }}</div>
            <div class="article-meta">
              <span class="views">
                <i class="el-icon-view"></i> {{ article.views }}
              </span>
              <span class="date">{{ article.date }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 文章详情对话框 -->
    <el-dialog
      :title="currentArticle.title"
      :visible.sync="articleDialogVisible"
      width="800px"
      class="article-dialog"
    >
      <div class="article-content" v-html="currentArticle.content"></div>
      <div class="article-footer">
        <div class="helpful-section">
          <div class="helpful-text">这篇文章对您有帮助吗？</div>
          <div class="helpful-buttons">
            <el-button size="small" @click="rateHelpful(true)">
              <i class="el-icon-thumb"></i> 有帮助
            </el-button>
            <el-button size="small" @click="rateHelpful(false)">
              <i class="el-icon-thumb" style="transform: rotate(180deg)"></i> 没帮助
            </el-button>
          </div>
        </div>
        
        <div class="related-articles">
          <div class="related-title">相关文章</div>
          <div class="related-list">
            <div 
              v-for="(article, index) in relatedArticles" 
              :key="index"
              class="related-item"
              @click="showArticle(article)"
            >
              <i class="el-icon-document"></i>
              <span>{{ article.title }}</span>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'HelpPage',
  data() {
    return {
      searchKeyword: '',
      activeCategory: 'getting-started',
      articleDialogVisible: false,
      currentArticle: {},
      
      categories: [
        { 
          id: 'getting-started', 
          name: '入门指南', 
          icon: 'el-icon-guide',
          description: '了解如何开始使用金圣达AI设计平台，快速上手各项功能。'
        },
        { 
          id: 'mindmap', 
          name: '思维导图', 
          icon: 'el-icon-share',
          description: '学习如何创建、编辑和分享思维导图，提高您的创意和思考效率。'
        },
        { 
          id: 'flowchart', 
          name: '流程图', 
          icon: 'el-icon-connection',
          description: '掌握流程图的创建和编辑技巧，轻松表达复杂的业务流程。'
        },
        { 
          id: 'ai-features', 
          name: 'AI功能', 
          icon: 'el-icon-cpu',
          description: '探索AI辅助设计功能，让创作更加高效和智能。'
        },
        { 
          id: 'collaboration', 
          name: '协作功能', 
          icon: 'el-icon-user',
          description: '了解如何与团队成员实时协作，提高团队工作效率。'
        },
        { 
          id: 'account', 
          name: '账号管理', 
          icon: 'el-icon-setting',
          description: '管理您的账号设置、会员信息和安全选项。'
        },
        { 
          id: 'faq', 
          name: '常见问题', 
          icon: 'el-icon-question',
          description: '查找常见问题的解答，快速解决使用中遇到的问题。'
        }
      ],
      
      articles: [
        {
          id: 1,
          categoryId: 'getting-started',
          title: '如何创建第一个项目',
          description: '了解如何在金圣达AI设计平台上创建您的第一个项目，开始您的创作之旅。',
          views: 1254,
          date: '2023-12-15',
          content: `
            <h2>如何创建第一个项目</h2>
            <p>欢迎使用金圣达AI设计平台！本文将指导您如何创建您的第一个项目。</p>
            
            <h3>步骤1：登录您的账号</h3>
            <p>首先，使用您的账号登录金圣达AI设计平台。如果您还没有账号，请先注册一个。</p>
            
            <h3>步骤2：进入工作台</h3>
            <p>登录后，您将自动进入工作台页面。这是您管理所有项目的中心。</p>
            
            <h3>步骤3：创建新项目</h3>
            <p>在工作台页面，点击"新建"按钮，然后选择您想要创建的项目类型：</p>
            <ul>
              <li>思维导图 - 用于组织思路和创意</li>
              <li>流程图 - 用于表示工作流程或系统流程</li>
              <li>原型图 - 用于设计应用或网站界面</li>
            </ul>
            
            <h3>步骤4：编辑您的项目</h3>
            <p>选择项目类型后，您将进入编辑器页面。在这里，您可以：</p>
            <ul>
              <li>添加节点或元素</li>
              <li>编辑文本内容</li>
              <li>调整样式和布局</li>
              <li>使用AI辅助功能生成内容</li>
            </ul>
            
            <h3>步骤5：保存您的项目</h3>
            <p>编辑完成后，点击顶部菜单栏的"保存"按钮保存您的项目。您也可以使用快捷键Ctrl+S（Windows）或Command+S（Mac）进行保存。</p>
            
            <h3>步骤6：分享您的项目</h3>
            <p>如果您想与他人分享您的项目，点击"分享"按钮，然后选择分享方式：</p>
            <ul>
              <li>生成链接 - 创建一个可访问的链接</li>
              <li>邀请协作者 - 邀请他人一起编辑</li>
              <li>导出文件 - 将项目导出为图片或PDF</li>
            </ul>
            
            <p>恭喜您！您已经成功创建了第一个项目。如果您有任何问题，请随时查看其他帮助文档或联系我们的客服团队。</p>
          `
        },
        {
          id: 2,
          categoryId: 'getting-started',
          title: '界面功能介绍',
          description: '详细了解金圣达AI设计平台的界面布局和各项功能，帮助您更高效地使用平台。',
          views: 987,
          date: '2023-12-18',
          content: `
            <h2>界面功能介绍</h2>
            <p>金圣达AI设计平台的界面设计直观易用，本文将帮助您了解各个部分的功能。</p>
            
            <h3>工作台界面</h3>
            <p>工作台是您管理所有项目的中心，包含以下部分：</p>
            <ul>
              <li><strong>左侧导航栏</strong> - 包含个人工作台、收藏夹和回收站等选项</li>
              <li><strong>顶部操作栏</strong> - 包含搜索框和用户操作按钮</li>
              <li><strong>主内容区</strong> - 显示您的文件列表，支持网格视图和列表视图</li>
            </ul>
            
            <h3>编辑器界面</h3>
            <p>编辑器是您创建和编辑项目的工作区，包含以下部分：</p>
            <ul>
              <li><strong>顶部菜单栏</strong> - 包含文件、编辑、视图等菜单选项</li>
              <li><strong>左侧工具栏</strong> - 包含各种绘图和编辑工具</li>
              <li><strong>右侧属性面板</strong> - 用于调整所选元素的属性和样式</li>
              <li><strong>底部状态栏</strong> - 显示缩放比例和其他状态信息</li>
              <li><strong>中央画布</strong> - 您的主要工作区域</li>
            </ul>
            
            <h3>常用功能按钮</h3>
            <p>平台中的常用功能按钮包括：</p>
            <ul>
              <li><strong>新建</strong> - 创建新的项目</li>
              <li><strong>保存</strong> - 保存当前项目</li>
              <li><strong>撤销/重做</strong> - 撤销或重做上一步操作</li>
              <li><strong>缩放</strong> - 调整画布的缩放比例</li>
              <li><strong>AI辅助</strong> - 使用AI功能生成或优化内容</li>
              <li><strong>分享</strong> - 分享项目或邀请协作者</li>
              <li><strong>导出</strong> - 将项目导出为图片或PDF</li>
            </ul>
            
            <h3>快捷键</h3>
            <p>使用快捷键可以提高您的工作效率：</p>
            <ul>
              <li><strong>Ctrl+S</strong> - 保存项目</li>
              <li><strong>Ctrl+Z</strong> - 撤销操作</li>
              <li><strong>Ctrl+Y</strong> - 重做操作</li>
              <li><strong>Ctrl++</strong> - 放大画布</li>
              <li><strong>Ctrl+-</strong> - 缩小画布</li>
              <li><strong>Ctrl+0</strong> - 重置画布缩放</li>
              <li><strong>Delete</strong> - 删除所选元素</li>
            </ul>
            
            <p>熟悉这些界面元素和功能将帮助您更高效地使用金圣达AI设计平台。如果您有任何疑问，请随时查看其他帮助文档或联系我们的客服团队。</p>
          `
        },
        {
          id: 3,
          categoryId: 'ai-features',
          title: 'AI自动生成思维导图',
          description: '学习如何使用AI功能自动生成思维导图，提高创作效率。',
          views: 1568,
          date: '2024-01-05',
          content: `
            <h2>AI自动生成思维导图</h2>
            <p>金圣达AI设计平台的AI自动生成功能可以帮助您快速创建思维导图，节省时间和精力。</p>
            
            <h3>如何使用AI生成思维导图</h3>
            <p>按照以下步骤使用AI自动生成思维导图：</p>
            <ol>
              <li>创建一个新的思维导图项目</li>
              <li>点击顶部菜单栏中的"AI助手"按钮</li>
              <li>在弹出的对话框中，输入您想要生成思维导图的主题或描述</li>
              <li>选择思维导图的结构类型（如辐射型、右侧树状、左侧树状等）</li>
              <li>点击"生成"按钮</li>
              <li>等待几秒钟，AI将为您生成一个完整的思维导图</li>
            </ol>
            
            <h3>优化AI生成的思维导图</h3>
            <p>AI生成的思维导图可能需要进一步优化：</p>
            <ul>
              <li>调整节点位置 - 拖动节点到您希望的位置</li>
              <li>编辑节点内容 - 双击节点修改文本</li>
              <li>添加或删除节点 - 使用工具栏添加新节点或删除不需要的节点</li>
              <li>调整样式 - 使用右侧属性面板修改颜色、字体等样式</li>
            </ul>
            
            <h3>AI生成的提示技巧</h3>
            <p>为了获得更好的AI生成结果，请尝试以下技巧：</p>
            <ul>
              <li>使用清晰具体的描述 - 越具体的描述会产生越精确的结果</li>
              <li>指定层级深度 - 例如"生成一个三层深度的项目管理思维导图"</li>
              <li>提供关键词 - 列出您希望包含在思维导图中的关键词</li>
              <li>指定行业或领域 - 例如"生成一个营销策略思维导图，针对电子商务行业"</li>
            </ul>
            
            <h3>AI生成的限制</h3>
            <p>请注意AI生成功能的一些限制：</p>
            <ul>
              <li>生成的内容可能需要进一步完善和调整</li>
              <li>复杂或专业性很强的主题可能需要更多人工编辑</li>
              <li>免费用户每天可使用的AI生成次数有限</li>
              <li>会员用户可享受更多的AI生成次数和更高质量的生成结果</li>
            </ul>
            
            <p>AI自动生成思维导图功能是提高工作效率的强大工具。通过实践和探索，您将能够充分利用这一功能，创建出高质量的思维导图。</p>
          `
        }
      ]
    }
  },
  computed: {
    currentCategory() {
      return this.categories.find(category => category.id === this.activeCategory) || {};
    },
    
    filteredArticles() {
      let articles = this.articles.filter(article => article.categoryId === this.activeCategory);
      
      if (this.searchKeyword) {
        const keyword = this.searchKeyword.toLowerCase();
        articles = articles.filter(article => 
          article.title.toLowerCase().includes(keyword) || 
          article.description.toLowerCase().includes(keyword)
        );
      }
      
      return articles;
    },
    
    relatedArticles() {
      if (!this.currentArticle.id) return [];
      
      // 获取同类别的其他文章
      return this.articles
        .filter(article => 
          article.categoryId === this.currentArticle.categoryId && 
          article.id !== this.currentArticle.id
        )
        .slice(0, 3); // 最多显示3篇相关文章
    }
  },
  methods: {
    showArticle(article) {
      this.currentArticle = article;
      this.articleDialogVisible = true;
    },
    
    rateHelpful(isHelpful) {
      // 这里可以添加向后端发送评价的逻辑
      this.$message({
        message: isHelpful ? '感谢您的反馈！' : '感谢您的反馈，我们会继续改进。',
        type: isHelpful ? 'success' : 'info'
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.help-page {
  min-height: 100vh;
  background-color: #f9f9f9;
  
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 40px;
    background: white;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    
    .logo-section {
      display: flex;
      align-items: center;
      cursor: pointer;
      
      .logo {
        width: 32px;
        height: 32px;
        margin-right: 10px;
      }
      
      .brand-name {
        font-size: 18px;
        font-weight: 500;
        color: #333;
      }
    }
    
    .back-btn {
      display: flex;
      align-items: center;
      cursor: pointer;
      color: #666;
      font-size: 14px;
      
      i {
        margin-right: 6px;
      }
      
      &:hover {
        color: #7239EA;
      }
    }
  }
  
  .content-wrapper {
    max-width: 1200px;
    margin: 30px auto;
    display: flex;
    
    .sidebar {
      width: 240px;
      background: white;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      padding: 20px;
      margin-right: 20px;
      
      .search-box {
        margin-bottom: 20px;
      }
      
      .category-list {
        .category-item {
          padding: 12px 15px;
          display: flex;
          align-items: center;
          cursor: pointer;
          color: #666;
          border-radius: 4px;
          margin-bottom: 5px;
          transition: all 0.3s;
          
          i {
            font-size: 16px;
            margin-right: 10px;
          }
          
          &:hover {
            background: #f5f5f5;
            color: #7239EA;
          }
          
          &.active {
            background: #f0f2ff;
            color: #7239EA;
            font-weight: 500;
          }
        }
      }
    }
    
    .main-content {
      flex: 1;
      background: white;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      padding: 30px;
      
      .help-header {
        margin-bottom: 30px;
        
        h1 {
          font-size: 24px;
          color: #333;
          margin-bottom: 10px;
        }
        
        p {
          font-size: 15px;
          color: #666;
          line-height: 1.5;
        }
      }
      
      .article-list {
        .article-item {
          padding: 20px;
          border-radius: 8px;
          background: #f9f9f9;
          margin-bottom: 15px;
          cursor: pointer;
          transition: all 0.3s;
          
          &:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
          }
          
          .article-title {
            font-size: 18px;
            font-weight: 500;
            color: #333;
            margin-bottom: 8px;
          }
          
          .article-desc {
            font-size: 14px;
            color: #666;
            margin-bottom: 12px;
            line-height: 1.5;
          }
          
          .article-meta {
            display: flex;
            font-size: 12px;
            color: #999;
            
            .views {
              display: flex;
              align-items: center;
              margin-right: 15px;
              
              i {
                margin-right: 4px;
              }
            }
          }
        }
      }
    }
  }
}

.article-dialog {
  ::v-deep .el-dialog__body {
    padding: 30px;
  }
  
  .article-content {
    font-size: 15px;
    line-height: 1.6;
    color: #333;
    
    h2 {
      font-size: 22px;
      margin-bottom: 20px;
      color: #333;
    }
    
    h3 {
      font-size: 18px;
      margin: 25px 0 15px;
      color: #333;
    }
    
    p {
      margin-bottom: 15px;
    }
    
    ul, ol {
      margin-bottom: 15px;
      padding-left: 20px;
      
      li {
        margin-bottom: 8px;
      }
    }
  }
  
  .article-footer {
    margin-top: 30px;
    border-top: 1px solid #eee;
    padding-top: 20px;
    
    .helpful-section {
      margin-bottom: 25px;
      
      .helpful-text {
        font-size: 15px;
        color: #333;
        margin-bottom: 10px;
      }
      
      .helpful-buttons {
        display: flex;
        gap: 10px;
      }
    }
    
    .related-articles {
      .related-title {
        font-size: 16px;
        font-weight: 500;
        color: #333;
        margin-bottom: 15px;
      }
      
      .related-list {
        .related-item {
          display: flex;
          align-items: center;
          padding: 10px 0;
          cursor: pointer;
          color: #178AFF;
          
          i {
            margin-right: 8px;
          }
          
          &:hover {
            text-decoration: underline;
          }
        }
      }
    }
  }
}
</style> 